    <template>
        <div class="mb-4">
            <el-button @click="success">Default</el-button>
            <el-button type="primary" @click="success" >Primary</el-button>
            <el-button type="success" @click="success">Success</el-button>
        </div>
   

        <div>
            <el-button :icon="Search" circle />
            <el-button type="primary" :icon="Edit" @click="success" circle />
            <el-button type="success" :icon="Check" @click="success" circle />
            <el-button type="info" :icon="Message" @click="success" circle />
            <el-button type="warning" :icon="Star" @click="success" circle />
            <el-button type="danger" :icon="Delete" @click="success" circle />
        </div>
    </template>

<script lang="ts" setup>
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'

import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

const success = () => {
    ElMessageBox.alert('This is a message', 'Title', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK',
        callback: (action: Action) => {
            ElMessage({
                type: 'info',
                message: `action: ${action}`,
            })
        },
    })
}

</script>


